import React, { PureComponent } from 'react';
import { PropTypes } from 'prop-types';
import { Tabs } from 'antd';
import { connect } from 'dva';
import Link from 'umi/link';
import * as collectionService from '../service/collections';
import WaterFall from '../component/WaterFall/';
import WorkDetail from '../component/WorkDetail/';

const TabPane = Tabs.TabPane;
class Index extends PureComponent {
	static defaultProps = {
		curTab:'hot',
		hasMore: true,
		loading:false,
		pages:1,
		hotImglist: [],//热门作品
		allImglist: [],//所有作品
		excellentImglist: [],//获奖作品
		myImglist: [],//我的作品
	}
	static propTypes = {
	    curTab: PropTypes.string,
	    loading: PropTypes.bool,
	    pages: PropTypes.number,
	    hasMore: PropTypes.bool,
	    hotImglist:PropTypes.array,
	    allImglist:PropTypes.array,
	    excellentImglist:PropTypes.array,
	    myImglist:PropTypes.array
	}
	constructor(props){
		super(props);
		this.onScrollHandle = this.onScrollHandle.bind(this);//处理滚动事件移除问题
	}
	state = {
		curTab: this.props.curTab,
		loading: this.props.loading,
		pages: this.props.pages,
		hasMore: this.props.hasMore,
		hotImglist: this.props.hotImglist,
		allImglist: this.props.allImglist,
		excellentImglist: this.props.excellentImglist,
		myImglist: this.props.myImglist,
	}
	componentDidMount() {
		this.handleInfiniteOnLoad();
	    window.addEventListener('scroll', this.onScrollHandle);
	}
	componentWillUnmount() {
    	window.removeEventListener('scroll', this.onScrollHandle);
  	}
  	changeTabs(key){
  		console.log(key)
  		switch(key){
  			case 'hot':
  				this.setState({
  					hotImglist:[],
			      	pages: 1,
			      	curTab:'hot'
			    },()=>{
  					this.getHotData();
			    })
  				break;
  			case 'all':
  				this.setState({
  					allImglist:[],
			      	pages: 1,
			      	curTab:'all'
			    },()=>{
  					this.getAllData();
			    })
  				break;
  			case 'excellent':
  				this.setState({
  					excellentImglist:[],
			      	curTab:'excellent'
			    },()=>{
  					this.getExcellentData();
			    })
			case 'my':
				this.setState({
  					myImglist:[],
			      	curTab:'my'
			    },()=>{
  					this.getMyData();
			    })
  		}
  	}
  	handleInfiniteOnLoad(){
	    //热门
	    if(this.state.curTab == 'hot'){
	    	this.getHotData();
	    }
  		//全部
	    if(this.state.curTab == 'all'){
	    	this.getAllData();
	    }
  	}
  	getHotData(){
  		let hotImglist = this.state.hotImglist;
	    var params = {
    		page:this.state.pages,
    		num:12
    	}
    	this.setState({
	      	loading: true,
	      	hasMore: false,
	    })
  		collectionService.hotList(params).then(res=>{
  			if(res.ret_pagecurrent < res.ret_pagecount){
				hotImglist = hotImglist.concat(res.ret_msg);
	  			this.setState({
					hotImglist,
					loading: true,
					hasMore: true,
					pages: this.state.pages+=1
				})
  			} else {
  				this.setState({
		    		hasMore: false,
		    		loading: false
		    	})
  			}
  		});
  	}
  	getAllData(){
  		let allImglist = this.state.allImglist;
	    var params = {
    		page:this.state.pages,
    		num:12
    	}
    	this.setState({
	      	loading: true,
	      	hasMore: false,
	    })
  		collectionService.allList({page:this.state.pages}).then(res=>{
  			if(res.ret_pagecurrent < res.ret_pagecount){
				allImglist = allImglist.concat(res.ret_msg);
	  			this.setState({
					allImglist,
					loading: true,
					hasMore: true,
					pages: this.state.pages+=1
				})
  			} else {
  				this.setState({
		    		hasMore: false,
		    		loading: false
		    	})
  			}
  		});
	}
	getExcellentData(){
  		let excellentImglist = this.state.excellentImglist;
  		this.setState({
	      	loading: true
	    })
  		collectionService.excellentList().then(res=>{
  			excellentImglist = excellentImglist.concat(res.ret_msg);
  			this.setState({
				excellentImglist,
				loading: false
			})
  		});
	}
	getMyData(){
  		let myImglist = this.state.myImglist;
  		this.setState({
	      	loading: true
	    })
  		collectionService.myList().then(res=>{
			myImglist = myImglist.concat(res.ret_msg);
  			this.setState({
				myImglist,
				loading: false
			})
  		});
	}
	onScrollHandle(event) {
		
	    var tabsbar = document.querySelector(".ant-tabs-bar");
		var height = document.querySelector('.ant-layout-content').offsetTop;
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		var scrollH = this.getScrollHeight()-this.getClientHeight() - this.getScrollTop();
		// 滚动固定菜单
		if(tabsbar && height){
			if (scrollTop < height) {
				tabsbar.classList.remove("isflxed")
			} else {
				tabsbar.classList.add("isflxed")
			}
		}
	    // 滚动加载
	    if(scrollH<100 && this.state.hasMore){
	    	console.log("滚动加载咯")
	    	this.handleInfiniteOnLoad();
	    }
	}
	/**
	 * 获取滚动条距离顶端的距离
	 * @return {}支持IE6
	 */
	getScrollTop() {
		var scrollPos;
		if (window.pageYOffset) {
			scrollPos = window.pageYOffset; 
		} else if (document.compatMode && document.compatMode != 'BackCompat'){ scrollPos = document.documentElement.scrollTop; 
		} else if (document.body) { 
			scrollPos = document.body.scrollTop; 
		} 
		return scrollPos; 
	}
	//取窗口可视范围的高度 
	getClientHeight () {
		var clientHeight = 0;
		if(document.body.clientHeight && document.documentElement.clientHeight) {
			var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
		} else {
			var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
		}
		return clientHeight;
	}
	//取窗口滚动条高度 
	getScrollHeight () {
		var scrollHeight = 0;
		if(document.documentElement && document.documentElement.scrollHeight) {
			scrollHeight = document.documentElement.scrollHeight;
		} else if(document.body) {
			scrollHeight = document.body.scrollHeight;
		}
		return scrollHeight;
	}
	render() {
		return (
		  	<div>
		  		<Tabs defaultActiveKey="hot" onChange={this.changeTabs.bind(this)}>
				    <TabPane tab="热门作品" key="hot">
				    	<WaterFall loading = {this.state.loading} data={this.state.hotImglist}></WaterFall>
				    </TabPane>
				    <TabPane tab="全部作品" key="all">
				    	<WaterFall loading = {this.state.loading} data={this.state.allImglist}></WaterFall>
				    </TabPane>
				    <TabPane tab="大赛详情" key="detail">
				    	<WorkDetail></WorkDetail>
				    </TabPane>
				    <TabPane tab="获奖作品" key="excellent">
				    	{this.state.excellentImglist.length>0 ?(
				    		this.state.excellentImglist.map(val=>
					    		<ul>
				        			<li>
				        				<h3 className="work_titles">{val.prize} (<span>{val.workcount}</span>)<p></p></h3>
				        				<div>
				        					<WaterFall loading = {this.state.loading} data={val.work}></WaterFall>
				        				</div>
				        			</li>
				        		</ul>
				    		)
				    	):(
			    			<h2 className="none_excellent">敬请期待</h2>	
			    		)}
				    </TabPane>
				    <TabPane tab="我的作品" key="my">
				    	{this.state.myImglist.length > 0 ?(
				    		<WaterFall loading = {this.state.loading} data={this.state.myImglist}></WaterFall>
				    	):(
			    			<Link to="/upload"><h2  className="gotoupload">上传作品</h2></Link>
			    		)}
				    </TabPane>
				</Tabs>
		  	</div>
		);
	}
}
export default Index;